<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
         <el-radio-group style="margin-bottom: 10px;" v-model="statistics_type" size="small" @change="change_statistics_type_value">
          <el-radio-button  border label="1">通话收入</el-radio-button>
          <el-radio-button  border label="2">月租收入</el-radio-button>
          <el-radio-button  border label="3">充值收入</el-radio-button>
        </el-radio-group>
      </div>
      <div class="right">
        <el-form :inline="true" :model="search">
           <el-form-item>
            <el-input v-model="search.to" style="width:240px" type="text" placeholder="请选择号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="success" @click="searchSubmit">导出</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div class="list">
      <el-table class="borderMargin" highlight-current-row border :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <template slot-scope="scope">
          <el-table-column prop="msisdn" label="号码">
            <template slot-scope="scope">
              <div style="text-align:left;padding-left:10px;">{{scope.row.msisdn}} </div>
              <div style="text-align:left;padding-left:10px;">{{scope.row.country && scope.row.country.countryName}}</div>
              <div style="text-align:left;padding-left:10px;">{{scope.row.callType==='inbound' ? '呼入' : scope.row.callType === 'callforwarding' ? '呼叫转移' : '呼出'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="to" label="通话电话">
            <template slot-scope="scope">
              （+{{scope.row.dialingPrefix}}) {{scope.row.to}}
            </template>
          </el-table-column>
          <el-table-column label="通话时长" width="110">
            <template slot-scope="scope">
              {{scope.row.duration | diffTime}}
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="400">
            <template slot-scope="scope">
              <div class="callforwarding">
                  <div class="flex" v-if="scope.row.callType==='inbound' || scope.row.callType === 'callforwarding'">
                    <div class="inPriceCost">
                      <span>呼入成本</span>
                      <span>呼入价格</span>
                    </div>
                    <div class="inPriceCost">
                      <span>{{scope.row.country && scope.row.country.inPriceCost ? scope.row.country.inPriceCost + '欧元/分' : '0欧元'}}</span>
                      <span>{{scope.row.inPrice ? scope.row.inPrice + '欧元/分' : '0欧元'}}</span>
                    </div>
                  </div>
                  <div class="flex" v-if="scope.row.callType==='outbound' || scope.row.callType === 'callforwarding'">
                    <div class="inPriceCost">
                      <span>呼出成本</span>
                      <span>呼出价格</span>
                    </div>
                    <div class="inPriceCost">
                      <span>{{scope.row.country && scope.row.country.outPriceCost ? scope.row.country.outPriceCost + '欧元/分' : '0欧元'}}</span>
                      <span v-if="scope.row.callType === 'callforwarding'">{{scope.row.mobileOutPrice | toFixed}} 欧元/分</span>
                      <span v-else>{{scope.row.outPrice ? scope.row.outPrice + '欧元/分' : '0欧元'}}</span>
                    </div>
                  </div>
              </div>
            </template>
          </el-table-column>
            <el-table-column label="Nexmo扣除话费">
              <template slot-scope="scope">
                {{scope.row.price | toFixed}}欧元
              </template>
            </el-table-column>
            <el-table-column label="扣除话费">
              <template slot-scope="scope">
                {{scope.row.callHarges | toFixed}}欧元
              </template>
            </el-table-column>
            <el-table-column label="通话利润" width="120">
              <template slot-scope="scope">
                {{scope.row.profits | toFixed}}欧元
              </template>
            </el-table-column>
            <el-table-column label="通话时间">
              <template slot-scope="scope">
                {{scope.row.createdAt | formatDate}}
              </template>
            </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="pages">
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChanges" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
export default {
  name: 'callincome',
  mixins: [mixinsTable],
  data() {
    return {
      search: {},
      statistics_type: '1',
      dateValue: '',
      rowIndex: '-1',
      map: {
        msisdn: [],
        mapTo: []
      },
      IndexArr: [],
      servicePath: '/records'
    };
  },
  created() {
    this.params.server = 'true';
    this.getList(1, (data) => {
      this.getNumber(data);
      data.map((item, index) => {
        this.map.msisdn.push(item.msisdn);
        this.map.mapTo.push(item.to);
      });
    });
  },
  methods: {
    change_statistics_type_value(value) {
      this.$router.push({ path: value === '1' ? '/callincome' : value === '2' ? '/contcome' : '/topupinconme', query: { time: +new Date() } });
    },
    handleCurrentChanges(val) {
      this.getList(val, (data) => {
        this.getNumber(data);
        data.map((item, index) => {
          this.map.msisdn.push(item.msisdn);
          this.map.mapTo.push(item.to);
        });
      });
    },
    searchSubmit() {
      this.params = {
        server: true,
        to: this.search.to
      };
      this.getList(1, (data) => {
        this.getNumber(data);
        data.map((item, index) => {
          this.map.msisdn.push(item.msisdn);
          this.map.mapTo.push(item.to);
        });
      });
    },
    // 获取相同编号的数组
    getNumber(data) {
      let OrderObj = {};
      data.map((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.msisdn]) {
          OrderObj[element.msisdn].push(index);
        } else {
          OrderObj[element.msisdn] = [];
          OrderObj[element.msisdn].push(index);
        }
      });

      // 将数组长度大于1的值 存储到this.IndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.IndexArr.push(OrderObj[k]);
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.IndexArr.length; i++) {
          let element = this.IndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
      // if (columnIndex === 0) {
      //   var total = this._filters(this.dataList[rowIndex].msisdn, 'msisdn');
      //   // 第一列的合并方法,省
      //   let row1 = total;
      //   console.log('total-' + total);
      //   const col1 = total > 1 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
      //   console.log('rowIndex=' + rowIndex);
      //   // if (rowIndex % total === 0) {
      //   return {
      //     rowspan: row1,
      //     colspan: col1
      //   };
      // } else {
      //   return {
      //     rowspan: 0,
      //     colspan: 0
      //   };
      // }
    }
  }
};
</script>
<style lang="scss">
.priceAccount{
  color:red;
  font-size:14px;
  margin-right: 50px;
}
.borderMargin td{
  padding: 12px 0px;
}
.inPriceCost{
  display: flex;
  span{
    flex: 1;
    display: block;
  }
}
.callforwarding{
  display: flex;
  .flex{
    flex: 1;
  }
}
</style>
